<template>
  <!-- Toast组件 -->
  <div class="toast">{{ message }}</div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "Toast",
  // 接收父组件传递过来的message
  props: ["message"],
};
export const useToast = () => {
  let show = ref(false);
  let message = ref("");
  const changeMessage = (mes) => {
    show.value = true;
    message.value = mes;
    setTimeout(() => {
      show.value = false;
      message.value = "";
    }, 2000);
  };
  return { show, message, changeMessage };
};
</script>

<style lang="scss" scoped>
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-color: rgba(0, 0, 0, 0.4);
  padding: 0.1rem;
  border-radius: 0.05rem;
  color: #fff;
}
</style>